<template>
  <view class="scan-page">
    <!-- 顶部操作区 -->
    <view class="top-bar">
      <text>当前箱：{{ currentBoxIndex + 1 }}</text>
      <button size="mini" @click="addBox">添加新箱</button>
      <picker :range="boxLabels" @change="switchBox">
        <view class="picker">
          切换箱：{{ currentBoxIndex + 1 }}
        </view>
      </picker>
    </view>

    <!-- 扫码区 -->
    <view class="scan-bar">
      <button type="primary" @click="scanCode">扫码</button>
      <input class="barcode-input" v-model="barcodeInput" placeholder="扫码枪输入或手动输入条码" @confirm="addBarcode" />
      <button size="mini" @click="addBarcode">添加</button>
    </view>

    <!-- 条码列表区 -->
    <view class="barcode-list">
      <view v-for="(code, idx) in currentBox.barcodes" :key="code" class="barcode-item">
        <text>{{ code }}</text>
        <button size="mini" type="warn" @click="removeBarcode(idx)">删除</button>
      </view>
    </view>

    <!-- 箱信息区 -->
    <view class="box-info">
      <view class="input-row">
        <text>长</text>
        <input v-model="currentBox.length" type="number" placeholder="cm" />
        <text>宽</text>
        <input v-model="currentBox.width" type="number" placeholder="cm" />
        <text>高</text>
        <input v-model="currentBox.height" type="number" placeholder="cm" />
      </view>
      <view class="count-row">
        <text>好件数：{{ currentBox.barcodes.length }}</text>
      </view>
    </view>

    <!-- 底部操作区 -->
    <view class="bottom-bar">
      <button type="success" @click="saveAll">批量保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      boxes: [
        { barcodes: [], length: '', width: '', height: '' }
      ],
      currentBoxIndex: 0,
      barcodeInput: '',
    }
  },
  computed: {
    currentBox() {
      return this.boxes[this.currentBoxIndex]
    },
    boxLabels() {
      return this.boxes.map((_, i) => `箱${i + 1}`)
    }
  },
  methods: {
    scanCode() {
      uni.scanCode({
        success: (res) => {
          this.barcodeInput = res.result
          this.addBarcode()
        }
      })
    },
    addBarcode() {
      const code = this.barcodeInput.trim()
      if (code && !this.currentBox.barcodes.includes(code)) {
        this.currentBox.barcodes.push(code)
        this.barcodeInput = ''
      } else {
        uni.showToast({ title: '条码重复或为空', icon: 'none' })
      }
    },
    removeBarcode(idx) {
      this.currentBox.barcodes.splice(idx, 1)
    },
    addBox() {
      this.boxes.push({ barcodes: [], length: '', width: '', height: '' })
      this.currentBoxIndex = this.boxes.length - 1
    },
    switchBox(e) {
      this.currentBoxIndex = Number(e.detail.value)
    },
    saveAll() {
      // 这里可调用API批量保存
      uni.showModal({
        title: '保存',
        content: `共${this.boxes.length}箱，确认保存？`,
        success: (res) => {
          if (res.confirm) {
            // TODO: 调用后端API
            uni.showToast({ title: '保存成功', icon: 'success' })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.scan-page {
  padding: 20rpx;
}
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.picker {
  margin-left: 10rpx;
}
.scan-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.barcode-input {
  flex: 1;
  margin: 0 10rpx;
  border: 1px solid #eee;
  border-radius: 6rpx;
  padding: 8rpx;
}
.barcode-list {
  margin-bottom: 20rpx;
}
.barcode-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8rpx 0;
  border-bottom: 1px solid #f0f0f0;
}
.box-info {
  margin-bottom: 20rpx;
}
.input-row {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 10rpx;
}
.count-row {
  font-weight: bold;
}
.bottom-bar {
  display: flex;
  justify-content: center;
  margin-top: 30rpx;
}
</style> 